<script setup>
import inviteImg from "./child/inviteImg.vue";
import { getInviteRecordList } from "@/api/register";
import { useUserStore } from "@/store/modules";
import { ref } from "vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";

const userStore = useUserStore()

const queryParams = ref({
  page: 0,
  count: 0, // 邀请总人数
})

const flag = ref(true)

// 邀请列表
const recordList = ref([])

// 邀请好友海报
const popupShow = ref(false)


// 滚动到底部触发的函数
function scrolltolower() {
  getInviteRecordListFn()
}

// 获取邀请列表的函数
async function getInviteRecordListFn() {
  if (!flag.value) return
  const res = await getInviteRecordList(queryParams.value.page)
  queryParams.value.count = res.data.count
  if (res.data.record.length >= 10) {
    queryParams.value.page++
  } else {
    flag.value = false
  }
  recordList.value.push(...res.data.record)
}

// 格式化计数函数
function countFn(count) {
  return count < 10 ? `0${count}` : `${count}`;
}


onShareAppMessage(() => {
  return {
    title: `你的朋友「 ${userStore.userInfo.nickname} 」邀请你加入鑫AI大家族~`,
    path: `/pages/painting/index?inviteCode=${userStore.userInfo.inviteCode}`,
    imageUrl: "/static/imgs/invite/1.png",
  };
});

onLoad(() => {
  getInviteRecordListFn()
})
</script>

<template>
  <div class='inviteFriends'>
    <NavBar>邀请好友</NavBar>
    <div class="container">
      <div class="header_logo">INVITE FRIENDS</div>
      <div class="header_content">邀请好友 一起用</div>
      <div class="my_invite_box">
        <div class="my_invite_title">邀请列表</div>

        <div class="my_invite_count">
          已邀请
          <div class="count_list">
            <div v-for="item in countFn(queryParams.count)" class="countSty">{{ item }}</div>
          </div>
          人
        </div>

        <div class="invite_btn">
          <button class="left" @click="popupShow = true">二维码邀请</button>
          <button class="right" open-type="share">立即邀请好友</button>
        </div>

      </div>

      <div class="invite_list">
        <div class="my_invite_title">邀请列表</div>
        <scroll-view scroll-y class="scrollView" @scrolltolower="scrolltolower">
          <div class="cell" v-for="item of recordList" v-if="recordList.length">
            <div class="logo">
              <img :src="item.avatarUrl" class="logoSty" mode="aspectFill" alt="">
            </div>
            <div class="center">
              <div class="name">{{ item?.nickname }}</div>
              <div class="time">{{ item.createTime }}</div>
            </div>
            <div class="level" :class="{ inLevel: level >= 0 }"> {{ item?.level === 0 ? "非会员" : "会员" }}</div>
          </div>
          <div class="noData" v-else>
            <img src="@/assets/imgs/zwjl.png" class="noData_img" mode="aspectFill" alt="" />
          </div>
        </scroll-view>

      </div>
    </div>
  </div>
  <inviteImg v-model:show="popupShow"></inviteImg>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang='scss' scoped>
.inviteFriends {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .container {
    flex: 1;
    padding: 24rpx 30rpx 40rpx;
    display: flex;
    flex-direction: column;

    .header_logo {
      font-size: 27rpx;
      color: var(--a-main-color);
      height: 40rpx;
      line-height: 31rpx;
      letter-spacing: 32rpx;
      text-align: center;
    }

    .header_content {
      letter-spacing: 4rpx;
      color: var(--a-main-color);
      font-size: 74.5rpx;
      font-weight: bold;
      text-align: center;
    }

    .my_invite_box {
      position: relative;
      height: 398rpx;
      border-radius: 24rpx;
      background: var(--a-main-box-bg-color);
      margin-top: 50rpx;

      .my_invite_title {
        text-align: center;
        width: 260rpx;
        height: 62rpx;
        line-height: 60rpx;
        color: var(--a-main-Feature-text-color);
        font-weight: bold;
        border-radius: 0 0 30rpx 30rpx;
        background: var(--a-main-color);
        margin: 0 auto;
      }

      .my_invite_count {
        color: var(--a-one-text-color);
        font-size: 30rpx;
        font-weight: bold;
        letter-spacing: 6rpx;
        margin-top: 40rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15rpx;

        .count_list {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12rpx;

          .countSty {
            width: 72rpx;
            height: 108rpx;
            font-weight: bold;
            font-size: 68rpx;
            border-radius: 9rpx;
            color: var(--a-one-text-color);
            text-align: center;
            background: var(--a-main-color);

            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

      }

      .invite_btn {
        display: flex;
        align-items: center;
        gap: 30rpx;
        padding: 0 30rpx;

        .left,
        .right {
          height: 103rpx;
          line-height: 103rpx;
          font-size: 32rpx;
          margin-top: 40rpx;
          background-color: transparent;
          font-weight: bold;
          border-radius: 54rpx;
          letter-spacing: 4rpx;

          &::after {
            border: transparent;
          }

          &.left {
            flex-shrink: 0;
            color: var(--a-main-color);
            border: 3rpx solid var(--a-main-color);
          }

          &.right {
            flex: 1;
            color: var(--a-main-Feature-text-color);
            background-color: var(--a-main-color);
          }


        }
      }
    }

    .invite_list {
      position: relative;
      flex: 1;
      border-radius: 24rpx;
      margin-top: 30rpx;
      background-color: var(--a-main-box-bg-color);

      display: flex;
      flex-direction: column;

      .my_invite_title {
        text-align: center;
        width: 260rpx;
        height: 62rpx;
        line-height: 60rpx;
        color: var(--a-main-Feature-text-color);
        font-weight: bold;
        border-radius: 0 0 30rpx 30rpx;
        background: var(--a-main-color);
        margin: 0 auto;
      }


      .scrollView {
        box-sizing: border-box;
        flex: 1;
        height: 1rpx;
        padding: 0 24rpx;

        .cell {
          display: flex;
          align-items: center;
          gap: 16rpx;
          padding: 20rpx 0;

          .logo {
            flex-shrink: 0;
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
            border: 2rpx solid #FFF;

            .logoSty {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .center {
            flex: 1;
            overflow: hidden;

            .name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: bold;
              font-size: 28rpx;
              color: var(--a-one-text-color);
            }

            .time {
              font-size: 24rpx;
              margin-top: 10rpx;
              color: var(--a-two-text-color);
            }

          }

          .level {
            flex-shrink: 0;
            width: 115rpx;
            height: 46rpx;
            font-size: 20rpx;
            color: var(--a-three-text-color);
            border-radius: 22rpx;
            background: #eeeeee;
            letter-spacing: 4rpx;

            display: flex;
            align-items: center;
            justify-content: center;

            &.inLevel {
              color: var(--a-one-text-color);
              background-color: var(--a-main-color);
            }
          }

        }

        .noData {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .noData_img {
            width: 400rpx;
            height: 400rpx;
          }
        }
      }

    }
  }
}
</style>